import { StyleSheet } from 'react-native';
import Animated, {
    useSharedValue,
    useAnimatedStyle,
    withTiming,
    withRepeat,
    withSequence,
} from 'react-native-reanimated';

import { ThemedText } from '@/components/ThemedText';


/* 
摆手 👋 动画
- react-native-reanimated 库

*/
export function HelloWave() {
    const rotationAnimation = useSharedValue(0);

    /* 
    解析动画
    - useSharedValue 声明一个共享的可变动画值（类似于 React 中的 useState，但它的更新过程是动画化的）。这里 rotationAnimation 被声明为一个共享值，用于存储旋转角度。
    - useAnimatedStyle 创建一个与动画绑定的样式对象。它接收一个函数，该函数会根据共享值的变化动态更新样式。在这里，它根据 rotationAnimation.value 更新旋转角度。
    - withTiming 一个动画函数，表示从当前值到指定值的平滑过渡，持续一段时间（通过 { duration: 150 } 指定）。
    - withRepeat 用于重复执行一个动画序列。在这里，它将整个动画重复执行 4 次。
    - withSequence 按顺序执行多个动画。在这里，它首先将旋转角度动画化为 25 度，随后再返回 0 度

    rotationAnimation.value：这是动画的核心，它控制 "👋" 旋转的角度。通过 withRepeat 和 withSequence，它先旋转 25 度，再返回 0 度，并且会重复 4 次。
    withTiming(25, { duration: 150 })：将角度从 0 动画到 25 度，持续时间为 150 毫秒。
    withTiming(0, { duration: 150 })：将角度从 25 度返回到 0，持续时间为 150 毫秒。
    通过 withRepeat，这两步被视为一个序列，整个序列重复 4 次。
    */
    rotationAnimation.value = withRepeat(
        withSequence(withTiming(25, { duration: 150 }), withTiming(0, { duration: 150 })),
        4 // Run the animation 4 times
    );

    const animatedStyle = useAnimatedStyle(() => ({
        transform: [{ rotate: `${rotationAnimation.value}deg` }],
    }));

    return (
        <Animated.View style={animatedStyle}>
            <ThemedText style={styles.text}>👋</ThemedText>
        </Animated.View>
    );
}

const styles = StyleSheet.create({
    text: {
        fontSize: 28,
        lineHeight: 32,
        marginTop: -6,
    },
});
